import React, { useRef } from "react";
interface PropsType {
  children: JSX.Element;
	upload: (file: File) => void
}

const Index: React.FC<PropsType> = ({ children, upload }) => {
  const input = useRef<HTMLInputElement | null>(null);

  const handleClick = () => {
    input.current?.click();
  };

  const handleChange = () => {
    if (!input.current) return;
    if (!input.current.files) return;
    const file = input.current.files[0];
		upload(file)
  };

  return (
    <div>
      <input
        ref={input}
        type="file"
        style={{ display: "none" }}
        onChange={() => handleChange()}
      />
      <div onClick={() => handleClick()}>{children}</div>
    </div>
  );
};

export default Index;
